<template>
  <div class="app-container">
    <div class="marginBottom10">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
      >新增</el-button>
      <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
    </div>
    <el-table
      ref="myTable"
      :data="dataList"
      max-height="600"
      border
      stripe
      fit
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" fixed />
      <el-table-column v-if="colData[0].isTrue" fixed label="编号" prop="businessId" :render-header="foo"/>
      <el-table-column v-if="colData[1].isTrue" fixed label="报告文号" prop="reportNo" :render-header="foo"/>
      <el-table-column v-if="colData[2].isTrue" fixed label="事务所名称" prop="firmName" :show-overflow-tooltip="true" width="150" :render-header="foo"/>
      <el-table-column v-if="colData[3].isTrue" fixed label="客户名称（被审验单位名称）" prop="customerName" :render-header="foo"/>
      <el-table-column v-if="colData[4].isTrue" fixed label="客户营业执照" prop="customerBusinessLicense" :render-header="foo"/>
      <el-table-column v-if="colData[5].isTrue" fixed label="报备类型" prop="reportType" :render-header="foo"/>
      <el-table-column v-if="colData[6].isTrue" label="意见类型" prop="opinionType" :render-header="foo"/>
      <el-table-column v-if="colData[7].isTrue" label="审计年度" prop="auditYear" :render-header="foo"/>
      <el-table-column v-if="colData[8].isTrue" label="报告日期" prop="reportTime" :render-header="foo"/>
      <el-table-column v-if="colData[9].isTrue" label="操作" fixed="right" width="160">
        <template slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button type="danger" plain size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :autoScroll="false"
      @pagination="getList"
    >
      <template v-slot:popover>
        <el-popover
          placement="top-end"
          width="260"
          trigger="hover"
        >
          <!--弹出的菜单内容-->
          <div class="selectMenu">
            <el-checkbox-group v-model="colOptions">
              <el-checkbox v-for="item in colSelect" :key="item" :label="item" class="displayBlock marginBottom10"/>
            </el-checkbox-group>
          </div>
          <el-button slot="reference" size="mini" class="selectBtn">
            <i class="el-icon-menu"></i><i class="el-icon-caret-bottom"></i>
          </el-button>
        </el-popover>
      </template>
    </pagination>
  </div>
</template>

<script>
  import { listDraftAssurance,delAssurance } from "@/api/system/assurance";
  import store from '@/store'
  export default {
    name: "AssuranceDrafts",
    data() {
      return {
        selectNum: 0,
        dialogVisible: false,  // 弹框： 查看
        dataList:[],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        colOptions: ['编号','报告文号','事务所名称','客户名称（被审验单位名称）','客户营业执照','报备类型','意见类型','审计年度','报告日期','操作'],  //多选框的选择项
        colSelect: ['编号','报告文号','事务所名称','客户名称（被审验单位名称）','客户营业执照','报备类型','意见类型','审计年度','报告日期','操作'],	//多选框已选择的内容，即表格中显示的列
        // isTrue属性存放列的状态
        colData: [
          { title: '编号', isTrue: true },
          { title: '报告文号', isTrue: true },
          { title: '事务所名称', isTrue: true },
          { title: '客户名称（被审验单位名称）', isTrue: true },
          { title: '客户营业执照', isTrue: true },
          { title: '报备类型', isTrue: true },
          { title: '意见类型', isTrue: true },
          { title: '审计年度', isTrue: true },
          { title: '报告日期', isTrue: true },
          { title: '操作', isTrue: true }
        ],
      };
    },
    beforeUpdate() {
      // 防止动态添加列时 表格乱
      this.$nextTick(() => {
        this.$refs.myTable.doLayout();
      });
    },
    watch: {
      colOptions(newVal, oldVal) {
        if (newVal) {    // 如果有值发生变化，即多选框的已选项变化
          let arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) 	// 未选中
          this.colData.filter(i => {
            if (arr.indexOf(i.title) !== -1) {
              i.isTrue = false
            } else {
              i.isTrue = true
            }
          })
        }
      }
    },
    created() {
      this.colOptions = [];
      this.colData.forEach(item => {
          if(item.isTrue){
              this.colOptions.push(item.title);
          }
      })
      this.getList();
    },
    methods: {
      foo(h,{column}) {
          return this.utilsFoo(h,{column})
      },
      handleAdd() {
        const userInfo = store.getters && store.getters.userInfo
        let isOfficeAccount = userInfo.isOfficeAccount;
        if(isOfficeAccount === 1){
          this.$router.push({ path: '/assurance/add'})
        }else{
          this.$router.push({ path: '/assurance/scipadAdd'})
        }
      },
      /** 查询权限列表 */
      getList() {
        this.loading = true;
        listDraftAssurance(this.queryParams).then(
          response => {
            this.dataList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.businessId)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.approvedPracticeDate = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 查看 操作 到编辑页 */
      handleUpdate(row) {
        const userInfo = store.getters && store.getters.userInfo
        let isOfficeAccount = userInfo.isOfficeAccount;
        if(isOfficeAccount === 1){
          this.$router.push({ path: '/assurance/add', query: { businessId: row.businessId}})
        }else{
          this.$router.push({ path: '/assurance/scipadAdd', query: { businessId: row.businessId}})
        }
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        let businessIdS = row.businessId || this.ids;
        this.$confirm(
          '是否确认删除业务数据id为"' + businessIdS + '"的数据项?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(()=> {
            delAssurance(businessIdS).then(() => {
              this.msgSuccess("删除成功");
              this.getList();
            })
          })
          .catch(function () {});
      }
    }
  };
</script>
<style lang="scss" scoped>
  .app-container{
    position: relative;
  }
  /*form 表单 样式设置 start*/
  ::v-deep .el-form-item{
    margin-bottom: 10px;
  }
  ::v-deep label[for='unifiedSocialCreditCode'],
  ::v-deep label[for='nameOfChargePerson'],
  ::v-deep label[for='certificateNoOfResponsity']{
    line-height: 20px;
  }
  ::v-deep .el-input--suffix .el-input__inner {
    padding-right: 10px;
  }
  ::v-deep .el-select .el-input--suffix .el-input__inner {
    padding-right: 30px;
  }
  ::v-deep .el-date-editor .el-range-input{
    width: 62%;
  }
  /*form 表单 样式设置 end*/

  .width220{
    width: 220px;
  }
  .failedContent{
    margin-top: 20px;
    padding: 20px;
    border: 1px dashed #ccc;
    p{
      line-height: 24px;
    }
  }

  .ulView{
    li{
      display: flex;
      border: 1px solid #dfe6ec;
      p{
        display: inline-block;
        padding: 10px 15px;
        line-height: 26px;
      }
      p:first-child{
        flex: 1;
        border-right: 1px solid #dfe6ec;
        font-weight: 500;
      }
      p:last-child{
        flex: 5;
      }

    }
    li + li{ border-top: none;}
  }
</style>
